<template>
    <div class="article-list">
        <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell :to="{name:'articleDetail',params:{id:item.art_id} }" v-for="item in list" :key="item.art_id">
                <template>
                    <!-- 标题 -->
                    <div>{{ item.title }}</div>
                    <!-- 图片部分 -->
                    <van-grid :border="false" :column-num="item.cover.type">
                        <van-grid-item v-for="(val,imgIndex) in item.cover.images" :key="imgIndex">
                            <van-image :src="val" />
                        </van-grid-item>
                    </van-grid>
                    <!--  -->
                    <div class="info">
                        <span>{{item.aut_name}}</span>
                        <span>{{item.comm_count}}评论</span>
                        <span>{{item.pubdate | relvTime}}</span>
                        <van-icon name="cross" />
                    </div>
                </template>
            </van-cell>
        </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import {
        articleListAPI
    } from '@/api'
    export default {
        components: {},
        props: {
            // 要求传入频道id
            channel_id: {
                //必传
                require: true
            }
        },
        data() {
            return {
                list: [],
                loading: false,
                finished: false,
                timestamp: Date.now(),
                pullLoading:false
            };
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        methods: {
            async onLoad() {

                let res = await articleListAPI({
                    // 频道id
                    channel_id: this.channel_id,
                    // 传入新闻时间戳，传当前时间戳就代表获取最新的新闻
                    // 如果你往上滚了，就应该查以前的新闻，而以前的新闻要传的时间戳
                    // 就是上一个时间段的时间戳
                    timestamp: this.timestamp
                })

                // 把数据存到list里
                // this.list = res.data.data.results
                // 注意：不能用赋值的，应该用push追加，而且应该是把results里的每个元素取出来追加
                // console.log(res.data.data.results)
                this.list.push(...res.data.data.results)

                // 把上一段新闻的时间戳赋值，赋值后下次来查就是查上一段新闻了
                this.timestamp = res.data.data.pre_timestamp

                // 本次数据加载完了记得要把loading改成false，才能方便下次加载
                this.loading = false

                // 判断新闻是否加载完毕
                if (res.data.data.pre_timestamp == null) {

                    this.finished = true
                }
            },

            //下拉刷新调用的方法
            async onRefresh(){
                // 加载最新新闻
                let res = await articleListAPI({
                    // 频道id
                    channel_id:this.channel_id,
                    timestamp:Date.now()
                })

                // 加载最新新闻要给数组
                this.list = res.data.data.results

                //替换后再把本次的上一页新闻的数据数据时间戳存起来
                this.timestamp = res.data.data.pre_timestamp

                //把加载状态改为false
                this.pullLoading = false
            }
        },
    }
</script>
<style scoped lang="less">
    .article-list {
        overflow: auto;
        position: fixed;
        width: 100%;
        top: 90px;
        bottom: 50px;
    }

    .info {
        color: gray;

        span:nth-child(2) {
            margin: 0 15px;
        }

        .van-icon {

            float: right;
        }
    }
</style>